<template>
    <div class="tmpl">
			<div class="tab">
				<ul id="tab">
					<li @click="getimg(0)" :class="{'selected' : selected == 0}">全部</li>
					
					<li v-for="(item,index) in list" :key="index" @click="getimg(item.id)"  :class="{'selected' :selected == item.id}" >{{item.title}}</li>
				</ul>
				
			</div>
			<div class="imgstyle">
				<ul>
				  <li v-for="item in img">
				  	<router-link :to='"/photo/"+item.id'>
				    <img v-lazy="item.img_url">
				    <p>
				    	 <span class="title" v-text="item.title"></span><br />
                        {{item.zhaiyao}}
				    </p>
				    </router-link>
				  </li>
				</ul>
				
				
			</div>
			
			
    </div>
</template>
<style scoped>
	image[lazy=loading] {
	  width: 40px;
	  height: 300px;
	  margin: auto;
	}
	 .imgstyle ul{
	 	margin: 0;
	 	list-style: none;
	 	padding: 0;
	 }
	 .imgstyle ul li {
	 	position: relative;
	 	
	 }
	.imgstyle ul img{
		width: 100%;
	}
	.imgstyle ul p{
		position: absolute;
		bottom: 0;
		left: 0;
		color: #fff;
		background-color: rgba(0,0,0,0.3);
	}
	.imgstyle ul p span{
		color: #0094FF;
		font-size: 16px;
		font-weight: 700;
	}
	

  .tab{
  	height: 30px;
  	line-height: 30px;
  	color: #0062CC;
  	overflow-y:hidden ;
  }
  .tab ul{
  	width: 250%;
  	list-style: none;
  	margin: 0;
  	padding: 0;
  }
  .tab ul li{
  	display: inline-block;
  	padding: 0 0 0 5px;
  	height: 100%;
  	line-height: 30px;
  }
  .tab ul li.selected{
  	background-color: #007AFF;
  	color: #fff;
  }
  
</style>
<script>
    import common from '../../kits/commit.js';
import { Indicator } from 'mint-ui';
    export default{
        data(){
            return{
            	selected:0,
            	list:[],
            	img:[]
            }
        },
        created(){
          this.gettab()
          this.getimg(0)
        },
        methods:{
    		gettab(){
    			let url = common.api+"/api/getimgcategory"
    			this.$http.get(url).then(res=>{
    				this.list = res.body.message
    				document.getElementById("tab").style.width = (this.list.length+1)*70+"px"
    			},res=>{
    				console.log("获取失败")
    				
    			})
    		},
    		getimg(id){
    			this.selected = id;
    			Indicator.open('加载中...');
    			let url = common.api+"/api/getimages/"+id
    			this.$http.get(url).then(res=>{
    				this.img = res.body.message
    				Indicator.close();
    			},res=>{
    				console.log("获取失败")
    				
    			})
    		}
    		
        }
    }
</script>
